<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <style>
        .hi{
             border: 1px solid green;   
        }
        .low{
             background-color: yellow;
        }
    </style>
    
    
<body>
  <button id="test1">test1</button>
  <div>
      <ul>
          <li class="item1">abcd1</li>
          <li class="item2 hi">abcd2</li>
          <li class="item3">abcd3</li>
      </ul>
          
  </div>
  <ul>
      <li>xx1</li>
      <li>xx2</li>
      <li>xx3</li>
  </ul>
  
   <ul>
      <li>xx1</li>
      <li>xx2</li>
      <li>xx3</li>
  </ul>
 
   <script>
      // var yu=jQuery.noConflict();
       $(function(){
    	   
    	   $("#test1").on("click",function(){
    		   $.ajax({
                   url:"login123",
                   type:"get",
                   data:{uname:"johnYu"},
                   success:function(d){
                     $("<li></li>").text(d.uname).appendTo("ul:first");
                   }
              });
    	   });
           
           
           
           
//           $(".item3").on("click",function(d){
//                alert("xxx");   
//           });
//           $(".item3").clone(true).prependTo("ul:first");
           
           
           //$("ul:first").remove();
           
//          $(".item2").on("click",function(){
//              //$(this).removeClass("hi").addClass("low");
//              $(this).toggleClass("low");
//          }); 
           
        //$("<li>target</li>").insertBefore(".item2");
        //$("<li>item4</li>").appendTo("ul:nth(2)");
       //$("ul").append($("<li>item4</li>"));
       //$(".item1").appendTo("ul");
       // $(".item3").prependTo("ul");   
           
       });
    
    </script>
</body>
</html>